<template>
	<view style="background-color: #fff;">
		<view style="width: 100%;height: 30px;background-color: #fff;"></view>
		<view class="top">
			添加银行卡
		</view>
		<view class="top2">
			请绑定持卡人本人的银行卡
		</view>
		<view class="input">
			<view class="input_left">
				持卡人:
			</view>
			<view class="input_right">
				<input class="uni-input" v-model="name" placeholder="请输入用户名" @blur="usernames()" />
				<view class="textdTips">
					{{nameTips}}
				</view>
			</view>
		</view>
		<view class="input">
			<view class="input_left">
				卡号:
			</view>
			<view class="input_right">
				<input class="uni-input" v-model="password" placeholder="请填写身份证号" @blur="passwords()" />
				<view class="textdTips">
					{{passwordTips}}
				</view>
			</view>
		</view>
		<view class="cardadd">
			<image src="../../../../../static/images/jcardadd.png" style="width: 100%;height: 100%;"></image>
		</view>
		<button disabled style="width: 30%;margin-top: 20%; height: 40px;margin-left: 35%;background-color: #ccc;line-height: 40px;" v-if="can">下一步</button>
		<button style="width: 30%;height: 40px;margin-top: 20%;margin-left: 35%;background-color: #007AFF;line-height: 40px;color: #fff;" v-else @click="toyan()">下一步</button>
		
		<view class="tip">
			由连连支付提供
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				can:true,
				name: '',
				password: '',
				nameTips: '',
				passwordTips: '',
			}
		},
		methods: {
			usernames() {
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (this.name == "") {
					return this.nameTips = "用户名不能为空";
					// return false;
				} else if (!reg_tel.test(this.name)) {
					return this.nameTips = "请正确填写您的手机号码！";
					// alert("请正确填写您的手机号码！");
				} else {
					this.valueName = false;
					return this.nameTips = ''
				}
			},
			passwords() {
				if (this.password == '') {
					this.nameTips = '';
					this.newpasswordTips = '';
					this.okpasswordTips = '';
					return this.passwordTips = "密码不能为空";
			
				} else if (this.password.length < 6) {
					this.nameTips = '';
					this.nameTips = '';
					this.newpasswordTips = '';
					this.okpasswordTips = '';
					return this.passwordTips = "大于六个字符";
			
				} else {
					this.can=false
					return this.passwordTips = ''
				}
			},
			toyan(){
				this.can=true
				uni.navigateTo({
					url:'../codecard/codecard'
				})
			}
		}
	}
</script>

<style scoped>
	.top{
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		font-weight: 600;
		text-align: center;
	}
	.top2{
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		text-align: center;
	}
     .input {
     	width: 100%;
     	height: 60px;
     	line-height: 40px;
     	display: flex;
     	flex-wrap: nowrap;
     	background-color: #FFF;
		margin-top: 20px;
     }
     
     .input_left {
     	width: 25%;
     	padding-left: 20px;
     	font-size: 14px
     }
     
     .input_right {
     	width: 75%;
     }
     
     .uni-input {
     	background-color: #fff;
     	width: 100%;
     	height: 30px;
     	text-indent: 10px;
     	border-radius: 5px;
     	margin-top: 4px;
     	border-top: 0px;
     	border-left: 0px;
     	border-right: 0px;
     	border-bottom: solid 1px #c0c0c0;
     }
     
     .textdTips {
     	font-size: 12px;
     	height: 25px;
     	color: red;
     	margin-top: -10px;
     }
	 .cardadd{
		 width: 80%;
		 height: 100px;
		 margin-left: 10%;
		 margin-top: 10%;
	 }
	 .tip{
		 width: 100%;
		 height: 135px;
		 line-height: 135px;
		 font-size: 10px;
		 text-align: center;
	 }
</style>
